<template>
    <a-modal :open="visible" :confirmLoading="loading" title="添加类别" @ok="save" @cancel="close">
        <CategoryForm ref="formRef" v-model:value="formState"></CategoryForm>
    </a-modal>
</template>
<script setup lang="ts">
import { ref, onActivated, onMounted, watch } from 'vue'

import CategoryForm from './categoryForm.vue'
import { useRouter } from "vue-router"
import { useTabStore } from '@/stores/tab'
import type { Category } from '@/types/Category'

import { putCategory } from '@/api/categoryApi'
import { message } from 'ant-design-vue'
import { useCategoryStore } from '@/stores/category'

const categoryStore = useCategoryStore()
const tabStore = useTabStore()
const router = useRouter()
const formState = ref<Category>({})
const formRef = ref()
const loading = ref(false)
const props = defineProps<{
    visible: boolean,
    category: Category
}>()
const emit = defineEmits<{
    ok: [],
    close: []
}>()
const save = async () => {
    loading.value = true
    try {
        await formRef.value.validate()
        let res = await putCategory(formState.value)
        message.success('修改成功')
        categoryStore.reloadList = true
         emit("ok")
        close()

    } catch (error) {

    }
    loading.value = false

}

const close = () => {
   emit('close')

}

watch(() => props.visible, (newVal) => {
    if(newVal){
        formState.value = JSON.parse(JSON.stringify(props.category))
    }
})
</script>
<style scoped>
.bottom-div {
    padding: 30px 0;
    text-align: center;
}
</style>